<template>
  <div>
    <h1 style="color: white;">区域鸟类威胁等级数据分析</h1>
    <span style="color: white;">请选择日期：</span>&nbsp;<input type="date" id="datePicker" @change="updateChart" style="margin-bottom: 10px;"><br>
    <span style="color: white;">危险等级：0-1</span><br><br>
    <canvas ref="chartCanvas" width="1000" height="600"></canvas>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedDate: this.getCurrentDate(),
    };
  },
  methods: {
    getCurrentDate() {
      const today = new Date();
      const month = (today.getMonth() + 1).toString().padStart(2, '0');
      const day = today.getDate().toString().padStart(2, '0');
      return `${today.getFullYear()}-${month}-${day}`;
    },
    updateChart() {
      const datePicker = document.getElementById('datePicker');
      this.selectedDate = datePicker.value || this.getCurrentDate();
      const { hours, threatLevels } = this.generateRandomData();
      this.drawChart(hours, threatLevels);
    },
    generateRandomData() {
      const hours = Array.from({ length: 24 }, (_, i) => i);
      const threatLevels = hours.map(() => Math.random());
      return { hours, threatLevels };
    },
    drawChart(hours, threatLevels) {
      const canvas = this.$refs.chartCanvas;
      const ctx = canvas.getContext('2d');
      const width = canvas.width;
      const height = canvas.height;

      ctx.clearRect(0, 0, width, height);

      // Draw axes
      ctx.beginPath();
      ctx.moveTo(50, 50);
      ctx.lineTo(50, height - 50);
      ctx.lineTo(width - 50, height - 50);
      ctx.stroke();

      const xSpacing = (width - 100) / (hours.length - 1);
      ctx.strokeStyle = 'white';
      ctx.fillStyle = 'white';

      for (let i = 0; i < hours.length; i++) {
        const x = 50 + i * xSpacing;
        ctx.beginPath();
        ctx.moveTo(x, height - 50);
        ctx.lineTo(x, height - 45);
        ctx.stroke();

        ctx.fillText(i.toString(), x, height - 30);
      }

      const ySpacing = (height - 100) / 5;
      for (let i = 0; i <= 5; i++) {
        const y = 50 + i * ySpacing;
        ctx.beginPath();
        ctx.moveTo(50, y);
        ctx.lineTo(width - 50, y);
        ctx.stroke();

        const label = (1 - i / 5).toFixed(1);
        ctx.fillText(label, 30, y + 5);
      }

      const yScale = (height - 100) / Math.max(...threatLevels);

      ctx.beginPath();
      ctx.moveTo(50, height - 50 - threatLevels[0] * yScale);

      for (let i = 1; i < hours.length; i++) {
        const x = 50 + i * xSpacing;
        const y = height - 50 - threatLevels[i] * yScale;
        ctx.lineTo(x, y);
      }

      ctx.lineWidth = 2;
      ctx.stroke();
    }
  },
  mounted() {
    this.updateChart();
  }
};
</script>

<style scoped>
canvas {
  border: 1px solid #ccc;
}
</style>
